<template>
	<div style="margin: 5px;">
     <div>
		<div>
          <el-row> <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 
					  <div v-for="opt in Data.Options" style="display:inline-block" >
					  <input type="text" class="blanktext" v-bind:style="{width:opt.InputLength +'px'}"  v-model="opt.blankText" v-if="opt.itemName=='___'"></input>
						<h3 v-if="opt.itemName!='___'" v-html="opt.itemName"></h3>
					</div>
				</el-row>
			</div>	
			

	</div>
    
    <div  v-if='canEdit==true' style="margin: 5px;">
     <el-card class="box-card" style="margin-top:20px" >
		  <el-alert title="说明:在编辑器中输入'___'表示填空的输入框." type="success">
  </el-alert>
  	    <EditorComponent  v-model="Data.Title"  v-bind:Html="Data.Title" @input="GetHtml" />
		<div class="radius" style="border-radius:2px; height:50px">
                            <table class='setting-table ' >
                                <tr>
                                     <td>  <el-checkbox  v-model="Data.MustAnswer"  >必答题</el-checkbox></td>
                                     <td>     
								
                                    </td>
                                    <td>
                                      
                                    <td>
                                     <td >  
                                         
                                     </td>
                                      <td>  
                                          
                                     </td>
                                </tr>
                            </table>
			

		</div>
		<table class='el-table_body' style="width: 100%;">
			<tr>
				<th>填空的标题</th>
				<th>输入框宽度(px)</th>
				<th>数据类型</th>
				<th>最小值</th>
				<th>最大值</th>
			</tr>
			<tr v-for="opt in Data.Options" v-if="opt.canFillBlank">
				<td>   <el-input size="small"  v-model="opt.memo" placeholder="请输入内容"></el-input></td>		
				<td>
					<div>
						<el-input size="small" style="width: 80px;" @change="updateInputLenght()" v-model="opt.InputLength" placeholder="请输入内容"></el-input>
					</div>
				</td>
				<td>
					 <div>
					<DataTypeComponent  v-model="opt.DataType"  ></DataTypeComponent>
					 </div>
				</td>
				<td> 
				 <div>
					<el-input-number  size="mini" :disabled="opt.DataType!=1" v-model="opt.MinValue"></el-input-number>
				 </div>
				</td>
				<td>
					 <div>
					<el-input-number  :disabled='opt.DataType!=1' size="mini"  v-model="opt.MaxValue"></el-input-number>
					 </div>
				</td>
			</tr>
		</table>
		 
     
	     <button @click="getanswer">answer</button>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
	    </el-card>
		 </div>
		
	</div>
</template>

<script lang='ts'>
import {Component, Vue, Watch, Prop } from 'vue-property-decorator';
    import FillBlankOption from './ts/FillBlankOption';
    import FillBlankSubject from './ts/FillBlankSubject';

    import TBaseQuestion from './ts/TBaseQuestion';
    import DataTypeComponent from './DataTypeComponent.vue';
    import EditorComponent from './EditorComponent.vue';
    import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';


    class OutPutObj {
    public Index: number = 0;
    public Html: string = '';
    constructor(index: number, html: string) {
      this.Index = index;
      this.Html = html;
    }
  }

    @Component(
     {
         components: {EditorComponent, DataTypeComponent},
     },
 )
 // 填空题控件
  export  default class FillBlankComponent  extends TBaseQuestion<FillBlankOption, FillBlankSubject> {

       public $name: string = 'FillBlankComponent';
       public blank_str = '___';
       public inputclass=" ";
     
      public Html: string = '';
      // 标题输出数组
      public OutPuts: OutPutObj[] = [];




      
      constructor() {

        super(FillBlankOption, FillBlankSubject);
        this.Data.QuestionType=QuestionTypes.qtFillBlank;
        this.Data.Title='姓名：___ 年龄：___ 岁,电话号码 ___';
      }

       mounted()
    {
      	super.mounted();
        this.initProps();

         console.info("component mounted!");
    }

     public SetItemText(index: Number, obj: any) {
     console.info('setItemText:' + index + ' obj:' + obj);
   }

       
      public initOptions() {

      }


   // 插入选项
    public insert(id: string): void {


    }
     public getQuestionData(): any {
        // return this.Data;
     }

     public setQuestionData(data: string) {

     }

     public getTitle(): void {
        // console.info(Data.Title);
         // this.Data.Title;
   }




   public setTitle(txt: string): void {

     }

    public GetHtml(html: string): void {
    this.Html = html;
    this.CreateOptions(html);
    this.Data.Title=html;


     }
   // 取得填空的个数
   public CreateOptions(html: string) {

      // clear array of Options

     while (this.Data.Options.length > 0) {
       this.Data.Options.pop();
     }


     let tempArray: string[] = html.split(this.blank_str);


     for (let i: number = 0; i < tempArray.length; i++) {
          let a = tempArray[i];
          if (i > 0) {

            let opt: FillBlankOption = new FillBlankOption();
            opt.itemName = this.blank_str;
            opt.canFillBlank = true;

            this.Data.Options.push(opt);

            let opt2: FillBlankOption = new FillBlankOption();
            opt2.itemName = a;
            opt2.canFillBlank = false;

            this.Data.Options.push(opt2);

          } else {

            let opt3: FillBlankOption = new FillBlankOption();
            opt3.itemName = a;
            opt3.canFillBlank = false;

            this.Data.Options.push(opt3);
          }
      }
      
   }
   getanswer():object[]{
        
        return this.Data.answer;
    }


   public GetInputClass(width: number): string {
     return 'width:' + width + 'px';
   }
  public updateInputLenght(): void {
    // this.CreateOptions(this.Html);
  }

  }
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}
	
.blanktext{

	border-top:none;
	border-left: none;
	border-right: none;
	border-bottom-width: thin;
	text-align: center;

}
.normltext{
  font-size: 20px;
  font-weight: 200;
  }
</style>
